<template>
  <div class="carStyle">
    <el-row>
      <el-col :span="24"
              align="left">
        <el-button type="primary"
                   icon="el-icon-plus"
                   @click="dialogFormVisible=true">添加</el-button>
      </el-col>
      <el-col :span="24"
              class="carStyle-main">
        <el-table :highlight-current-row='true'
                  :data='carTable.list'>
          <el-table-column prop='no'
                           label='序号'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop='styleName'
                           label='类型名称'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='操作'
                           align='left'>
            <template>
              <el-button type="warning"
                         size="mini"
                         @click="dialogFormVisible=true"
                         icon="el-icon-edit-outline"></el-button>
              <el-button type="danger"
                         size="mini"
                         icon="el-icon-close"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="类型名称"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   width="30%"
                   center
                   :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="车辆类型"
                          required
                          prop="carStyle">
              <el-input v-model="form.carStyle"
                        class="normal-input"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="success"
                       @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="24"
              align="center">
        <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.page_size'
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='carTable.total_count'
                       align='center'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      requestParam: {
        page: 1,
        page_size: 10
      },
      carTable: {
        list: [{
          no: "1",
          styleName: "大型平板车",
        }],
        total_count: 10
      },
      form: {
        carStyle: ""
      }
    }
  },
  methods: {
    handlePageChange () {

    }
  }
}
</script>
<style lang="scss" scoped>
.carStyle-main {
  margin-bottom: 20px;
  .normal-input {
    width: 75%;
  }
}
</style>
